<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-on访问修饰符</title>
	</head>
	<body>
		<div id="app">
			<h2>1.@click.stop实现事件冒泡用法</h2>
			<div @click="show1">
				div文本
				<button type="button" @click.stop="btn">单元测试</button>
			</div>
			<hr >
			
			<h2>2.@click.prevent 阻止默认事件</h2>
			<form action="http://www.baidu.com" method="post" @click.prevent="submitClick">
				
				<input type="submit" value="提交"/>
			</form>
			<hr >
			
			<h2>3.@keyup键盘修饰符</h2>
			KeyPress主要用来捕获数字(注意：包括Shift+数字的符号)、字母（注意：包括大小写）、小键盘等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键外的ANSI字符
			
			<br>
			<input type="text" name="name" id="name" @keyup="keyup" @keydown="keydown" @keypress="keypress" />
			
			当按固定按钮时会触发操作
			<input type="text" name="name1" id="name1" @keyup.enter="key1"/>
			<hr >
			
			<h2>4.只触发一次</h2>
			<button type="button" @click.once="click2">触发按钮</button>
			<hr >
			
		</div>
		
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: { 
					num : "0",
				},
				methods:{
					show1(){1
						alert("div事件呗点击")
					},
					btn(){
						alert("按钮呗点击")
					},
					submitClick(){
						alert("阻止默认事件");
					},
					keyup(){
						console.log("按键弹起");
					},
					keydown(){
						console.log("按钮按下");
					},
					keypress(){
						console.log("AAA");
					},
					key1(){
						console.log("测试代码");
					},
					click2(){
						console.log("触发按钮2");
					}
				}
			});
		</script>
	</body>
</html>
